.c_background{
    width: 100%;
    height:100%;
    background: url("../images/QixiC.png") no-repeat;
    background-size: 100% 100%;
}
    
.girl {
    background: url("../images/girl.png") -755px -0px no-repeat;
    position: absolute;
    right: 40%;
    top: 26%;
    width: 151px;
    height: 291px;
}


.girl_turn{
   animation:girlRotate 780ms steps(1,start);
   animation-fill-mode:forwards;
}

@keyframes girlRotate{
    0% {
        background-position: -604px -0px;
    }
    16.7% {
        background-position: -151px -0px;
    }
    33.4% {
        background-position: -906px -0px;
    }
    50.1% {
        background-position: -0px -0px;
    }
    66.8% {
        background-position: -302px -0px;
    }
    83.5% {
        background-position: -453px -0px;
    }
    100% {
        background-position: -604px -0px;
    }
}



.stars > li {
    position: absolute;
    width: 30px;
    height: 31px;
    background: url("../images/stars.png") no-repeat;
    -webkit-animation-name: flash;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration:5s;
   
}

.stars1 { top: 20%;  left: 30%;}

.stars2 {   top: 15%;   left: 20%;}

.stars3 {  top: 25%;left: 85%;}

.stars4 { top: 30%;left: 70%;}

.stars5 { top: 25%; left: 20%;}

.stars6 { top: 10%;left: 65%;}

@-webkit-keyframes flash {
    0%, 50%, 100% { opacity: 1;}
    25%,   75% {  opacity: 0; }
}

@-moz-keyframes flash {
    0%, 50%, 100% { opacity: 1;}
    25%,75% {  opacity: 0;  }
}


.snowflake {
    position: absolute;
    top: 100;
    left: 100;
    z-index: 100;
    opacity: 0.7;
    background-size: 100% 100%;
    height: 42px;
    width: 42px;
}
.flow{
       transition-timing-function:linear;
       transition-duration:30000ms;
       transform:translate3d(600px,1000px,50px)  rotate(1080deg);
       opacity:1;
}
